<template>
  <div class="articlecell" v-if="post.type == 1 && post.cover.length<=2" @click="$router.push({path:`/articleDetail/${post.id}`})">
      <div class="left">
          <p class="title">{{post.title}}</p>
          <p class="author">
              <span>{{post.user.nickname}}</span>
              <span>{{post.comment_length}}评论</span>
          </p>
      </div>
      <div class="right">
          <img :src="post.cover[0].url" alt="">
      </div>
  </div>
  <div class="articlecellv" v-else-if="post.type == 2" @click="$router.push({path:`/articleDetail/${post.id}`})">
          <p class="title">{{post.title}}</p>
          <div class="img">
               <img :src="post.cover[0].url" alt="">
               <van-icon name="play-circle-o" class="play"/>
          </div>
          <p class="author">
              <span>{{post.user.nickname}}</span>
              <span>{{post.comment_length}}评论</span>
          </p>
       
  </div>
   <div class="articlecellt" v-else-if="post.type == 1 && post.cover.length>=3" @click="$router.push({path:`/articleDetail/${post.id}`})">
          <p class="title">{{post.title}}</p>
          <div class="imgs">
               <img :src="pic.url" alt="" v-for="pic in post.cover" :key="pic.id">
          </div>
          <p class="author">
              <span>{{post.user.nickname}}</span>
              <span>{{post.comment_length}}评论</span>
          </p>
       
  </div>
</template>

<script>
export default {
    props: ['post']

}
</script>

<style lang="less" scoped>
    .articlecell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        margin-bottom: 20px;
        padding: 15px 0;

        .left {
            flex: 2;
            // padding: 10px;
            p {
                padding: 8px;
            }
            span {
                padding-left: 5px;
            }
        }
        .right {
            flex:1;
            padding: 10px;

            img {
                width:100%;
            }
        }
    }
    .articlecellv {
         display: flex;
        flex-direction: column;
        border-bottom: 1px solid #ccc;
        margin-bottom: 20px;
        padding: 15px 0;
        .img {
            position: relative;
            padding: 10px;
            img {
                width: 100%;
            }
            .play {
                position: absolute;
                font-size: 60px;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                color: rgba(255,255,255,0.8);
            }
        }
    }
    .articlecellt {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #ccc;
        margin-bottom: 20px;
        padding: 15px 0;
        .imgs {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            img {
                width: 32%;
            }
        }
    }
    .author {
        span {
            padding: 10px;
        }
    }
</style>